'use client';

import { Inter } from 'next/font/google';
import './globals.css';
import { ConfigProvider, theme } from 'antd';
import { Providers } from '@/components/providers';
import { Header } from '@/components/shared/header';
import { Sidebar } from '@/components/shared/sidebar';
import { metadata } from './metadata';
import { useState } from 'react';

const inter = Inter({ subsets: ['latin'] });

function RootLayoutContent({ children }: { children: React.ReactNode }) {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  return (
    <Providers>
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: '#1890ff',
          },
          algorithm: theme.defaultAlgorithm,
        }}
      >
        <div className="flex min-h-screen">
          <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
          <div className="flex-1">
            <Header onMenuClick={() => setIsSidebarOpen(true)} />
            <main className="flex-1 p-6">
              {children}
            </main>
          </div>
        </div>
      </ConfigProvider>
    </Providers>
  );
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body className={inter.className}>
        <RootLayoutContent>
          {children}
        </RootLayoutContent>
      </body>
    </html>
  );
}
